<template>
  <el-dialog
    :title="title"
    :visible.sync="Visible"
  >
    <el-form :model="ruleForm"  ref="ruleForm" label-position="right"  label-width="100px" class="small-space">
      <el-row v-loading.body="listLoading">
        <el-col :span="15" :offset="2">

          <el-form-item  label="职位" prop="cardType">
            <el-select v-model="ruleForm.role" placeholder="请选择职位">
              <el-option label="前台" value="receptionist"></el-option>
              <el-option label="经理" value="manager"></el-option>
              <el-option label="教练" value="coach"></el-option>
              <el-option label="销售" value="saleman"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.username">{{errors.username ? errors.username[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="ruleForm.realname"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.realname">{{errors.realname ? errors.realname[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item label="电话号码" prop="mobile" >
            <el-input v-model="ruleForm.mobile"></el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.mobile">{{errors.mobile ? errors.mobile[0] : ''}}</div>
            </transition>
          </el-form-item>
          <!--<el-form-item label="邮箱" prop="email">-->
            <!--<el-input v-model="ruleForm.email"></el-input>-->
            <!--<transition name="el-zoom-in-top">-->
              <!--<div class="el-form-item__error" v-if="errors.email">{{errors.email ? errors.email[0] : ''}}</div>-->
            <!--</transition>-->
          <!--</el-form-item>-->
          <el-form-item prop="password" label="密码" v-if="this.title === '添加'">
            <el-input name="password" :type="pwdShow?'text':'password'" v-model="ruleForm.password" autoComplete="on" placeholder="请输入密码" />
            <span class='show-pwd' @click='pwdShow = !(pwdShow)'><icon-svg icon-class="yanjing" /></span>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.password">{{errors.password ? errors.password[0] : ''}}</div>
            </transition>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import { Show, Update, Create } from '@/api/staff'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    editId: {}
  },
  data() {
    return {
      errors: {},
      pwdShow: false,
      listLoading: false,
      Visible: this.dialogVisible,
      loadTable: false,
      ruleForm: {
        realname: null,
        role: 'receptionist',
        username: null,
        password: null,
        mobile: null,
        email: null
      }
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        this.loadTable = false
        this.Visible = this.dialogVisible

        //          ↓ 打开的时候
        if (this.title === '编辑') {
          this.listLoading = true
          Show(this.editId).then((res) => {
            this.ruleForm = res.data
            console.log('debuf-->> staff', res)
            this.listLoading = false
          })
        }
      }
    },
    Visible() {
      this.$emit('closeDialog', this.loadTable)
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.errors = {}
          this.listLoading = true
          if (this.title === '编辑') {
            Update(this.editId, _.pick(this.ruleForm, ['realname', 'username', 'mobile', 'role'])).then(() => {
              this.$message({ message: '保存成功', type: 'success' })
              this.close()
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          } else {
            Create(_.pick(this.ruleForm, ['realname', 'username', 'mobile', 'role', 'password'])).then(() => {
              this.$message({ message: '保存成功', type: 'success' })
              this.close()
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          }

          //            this.resetForm('ruleForm')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.listLoading = false
      this.resetForm('ruleForm') // 清空表单
      this.loadTable = true
      this.Visible = false // 关闭对话框
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  $dark_gray:#889aa4;
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
  }
</style>
